<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="common/js/framework.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/js/navbar.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/js/copyright.js"></script>

    <link rel="stylesheet" href="common/css/scp.css" type="text/css"/>
    <!-- 私有 -->
    <link rel="stylesheet" href="index/css/index.css" type="text/css"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="">
    <style>
        .item img {
            width: 100%;
            height: 500px;
        }

        .citem p {
            height: 30px;
            line-height: 30px;
        }

        .pinglun textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
        }

        .content {
            padding: 10px;
        }

        /*#userNav:hover {*/
        /*    background: red;*/
        /*}*/
        .border-bottom {
            border-bottom: 2px solid deepskyblue;
        }
    </style>

</head>
<body>
<div id="navBarId" class="head">
</div>
<div class="layui-container" id="app">
    <hr>
    <div>
        <span class="layui-breadcrumb">
            <div><span class="layui-breadcrumb" style="visibility: visible;"><a href="/dongtai">社区动态</a><span
                    lay-separator="">/</span> <a><cite>详情</cite></a></span></div>
        </span>
    </div>
    <hr>
    <div class="layui-row" id="contentArea">
        <div class="item">
            <img :src="getUrl(detail.img)" alt="">
            <div class="content" v-html="detail.detail">
                {{detail.detail}}
            </div>
            <hr>
            <div style="padding: 5px 5px;display: flex;">
                <p style="width: 50%;height: 20px;line-height: 20px;padding-left: 20px;">
                    点赞数量&nbsp;&nbsp;{{detail.totalPrimary}}</p>
                <p style="width: 50%;height:20px;line-height: 20px;text-align: right;padding-right: 20px;">
                    评论数量&nbsp;&nbsp;{{detail.totalComment}}</p>
            </div>
        </div>
        <hr>
        <p style="text-align: center;">评论列表</p>
        <hr>
        <div class="comment">
            <div class="citem" v-for="(item,index) in commentList" :key="index">
                <p style="font-weight: bold;">{{item.username}}发布于 {{item.createtime}}</p>
                <p style="height: auto;">{{item.content}}</p>
                <hr>
            </div>
        </div>
        <div class="pinglun" style="margin-bottom: 20px;">
            <textarea id="content" placeholder="在此输入你的评论内容"></textarea>
            <p style="text-align: center;">
                <button class="layui-btn layui-btn-xs layui-btn-danger" @click="pinglun()">发布评论</button>
                <button class="layui-btn layui-btn-xs layui-btn-warm" @click="dianzan()">
                    &nbsp;&nbsp;&nbsp;&nbsp;点赞&nbsp;&nbsp;&nbsp;&nbsp;
                </button>
            </p>
        </div>
    </div>
</div>
<div id="navbottomBarId"></div>
<script type="text/javascript" charset="utf-8" src="index/js/index.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: '1200px'
            , arrow: 'always' //始终显示箭头
            , autoplay: true
            , arrow: 'hover'
        });
    });
    let param = album.getQueryString()
    console.log(param)
    new Vue({
        el: '#app',
        data: {
            detail: null,
            commentList: []
        },
        created: function () {
            this.init();
        },
        methods: {
            init: function () {
                let _this = this
                $.get("/news/detail", {id: param.id}, function (res) {
                    console.log(res)
                    _this.detail = res.detail
                    _this.commentList = res.comment
                })
            },
            getUrl: function (url) {
                return "/" + url
            },
            pinglun() {
                let _this = this
                let content = $("#content").val()
                if (!content) {
                    layer.msg("请填写评论内容", {icon: 2})
                    return
                }
                $.get("/news/pinglun", {
                    newsid: param.id,
                    parentId:"",
                    content: content
                }, function (res) {
                    layer.msg("评论成功!", {icon: 1})
                    $("#content").val("")
                    _this.init()
                })
            },
            dianzan() {
                let _this = this
                $.get("/news/dianzan", {
                    newsid: param.id
                }, function (res) {
                    layer.msg("点赞成功!", {icon: 1})
                    _this.init()
                })
            }
        }
    })
</script>
</body>
</html>